p {
  width: 200px;
  height: 200px;
  border: 1px solid blue;
}

.box1 {
  background: url(../images/star.png) center no-repeat,
    linear-gradient(100deg, rgba(35, 35, 248, 0.5), rgba(185, 62, 62, 0.8)) left
      bottom / 100px 100px no-repeat,
    rgb(202, 148, 255);
}

.box2 {
  background-color: rgb(168, 35, 35);
}

.box3 {
  background-image: url(../images/star.png);
  background-repeat: no-repeat;
  /* background-repeat: repeat-x; */
  /* background-repeat: repeat-y; */
  /* background-size: contain; */
  /* background-size: 100px 100px; */
  background-size: 25%;
  /* background-position: left; */
  /* background-position: top; */
  /* background-position: -30px; */
  /* background-position: 80px; */
  /* background-position: 100px 100px; */
  /* background-position: 100px bottom; */
  /* background-position: left 50px bottom; */
  background-position: left 20px top 50px;
}

.box4 {
  background: url(../images/star.png) repeat-y;
  background-attachment: fixed;
}

.box5 {
  width: 160px;
  height: 160px;
  background: url(../images/bg-a.png) no-repeat 0px 0px;
}

.box5:hover {
  cursor: pointer;
  background-position: -160px 0px;
}

.box6 {
  background-image: url(../images/cry.png), url(../images/smile.png),
    url(../images/star.png);
  background-repeat: no-repeat;
  background-position: left top 30px, left bottom, right bottom;
  background-size: 20%, 30%, 40%;
}
